<template>
	<view class="login-container">
		<view :style="{height: loginData.statusBarHeight + 'px' }"></view>
		<view class="h-title" :style="{height: loginData.navHeight + 'px'}">管理端登录</view>
		<view class="content">
			<view class="header">
			  <view class="header-title-type">管理端</view>
			  <view class="header-title">{{loginData.programName}}</view>
			</view>
			<view class="btn-box">
				<button type="info" open-type="getPhoneNumber" @getphonenumber="handleLogin" class="btn" block @click="getLoginCode">
					<tm-icon fontSize="40" name="iconfont icon-shoujihao" color="#4A76F7"></tm-icon>
					<text style="color:#4A76F7; margin-left: 10rpx;">手机号快捷登录</text>
				</button>
				<text class="t-tips">仅内部人员使用</text>
			</view>
			
			<view class="footer-container">
			    <view class="footer-content">
			        <image class="footer-image" src="https://wm-sby.oss-cn-shanghai.aliyuncs.com/applet_assets/login-footer.png" mode="aspectFill"></image>
			        <view class="footer-content-main-o">
						<view class="footer-content-main">
						  <view>企业服务·智能报修·智能缴费·电子发票</view>
						  <view>安全管控·活动场地·培训中心·停车月卡</view>
						</view>
					</view>
			    </view>
				<view class="copyright">
					<text>万名云提供技术支持</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {reactive, computed} from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import utils from '@/utils/index';
	import {login, getSmallProgram} from '@/api_request/api'
	import { useInfoStore } from '@/store/userInfo'
	import { programConfigStore } from '@/store/smallProgramConfig'
	import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue';
	import {ASSETS_HOST} from '@/config';
	
	const userStore = useInfoStore()
	const configStore = programConfigStore()
	
	const loginData = reactive({
		height: 0,
		statusBarHeight: 48, //自定义的顶部栏高度
		navHeight: 44,
		code: '',
		programName: ''
	})
	
	onLoad(() => {
    console.log('jp======utils.storage.token()',utils.storage.token())
    if(utils.storage.token()) {
      console.log('jp======跳转到招商工作台',)
      uni.reLaunch({
        url: '/subpkg/merchants_workbench/index'
      })
    }
		getSmallProgramConfig()
		setSystem()
	})
	
	const handleLogin = async (e) => {
		if (e.detail.errMsg == 'getPhoneNumber:ok') {
			const params = {
				code: loginData.code,
				appid: 'wx488238719f929582',
			    phone_code:e.detail.code
			}
      const {data, code, message} = await login(params)
      if(code === 200) {
        uni.$showMsg('登录成功')
        // uni.$showMsg()
        userStore.userInfo = data.userInfo
        utils.storage.login(data.token);
        utils.storage.setUserId(data.userInfo.id);
        utils.storage.setUserInfo(data.userInfo);
        uni.showToast({
          title: '登录成功',
          icon:'none',
          complete: ()=> {
            setTimeout(() => {
              uni.reLaunch({
                url: '/subpkg/merchants_workbench/index'
                // url: '/pages/home/home'
              })
            }, 500)
          }
        })
			} else if(code === 0){
        uni.$showMsg('未查询到您的手机号，请联系楼宇管理方人员添加！')
      } else {
				uni.$showMsg(message)
			}
		}
	}
	const getLoginCode = ()=> {
		wx.login({
			provider: 'weixin',
			success: async (res) => {
				if(res.errMsg == 'login:ok') {
					loginData.code = res.code
				}
			}
		})
	}
	
	const getSmallProgramConfig = async ()=> {
		const {data, code, message} = await getSmallProgram({appid: 'wx488238719f929582'})
		if(code == 200) {
			loginData.programName = data.name
			configStore.configData.name = data.name;
			configStore.configData.corporation_id = data.corporation_id;
		}else {
			uni.$showMsg(message)
		}
	}
	
	const setSystem = ()=> {
		const { statusBarHeight, windowWidth, system } = wx.getSystemInfoSync();
		const isiOS = system.indexOf("iOS") > -1;
		let navHeight;
		if (!isiOS) {
			navHeight = 48;
		} else {
			navHeight = 44;
		}
		loginData.navHeight = navHeight;
		loginData.statusBarHeight = statusBarHeight;
		loginData.height = loginData.navHeight + loginData.statusBarHeight;
	}
	
	const bgcImg = computed(() => {
		const imgUrl = `${ASSETS_HOST}applet_assets/login-footer.png`
		return `url("${imgUrl}") center no-repeat`
	})
</script>

<style lang="scss" scoped>
.login-container {
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #D9DEFF 0%, #FFFFFF 100%);
	
	.h-title {
		display: flex;
		justify-content: center;
		font-size: 34rpx;
		line-height: 40rpx;
		font-weight: 500;
		padding-top: 12rpx;
	}
	
	.content {
		padding:0 60rpx;
		box-sizing: border-box;
		
		.header {
			  margin-top:24rpx;
			  display:flex;
			  flex-direction:column;
			  align-items:flex-end;
			  
			  .header-title {
				color:$cus-color-2;
				font-size: 64rpx;
				font-weight: 700;
				line-height: 64rpx;
				margin-top:40rpx;
				text-align: center;
				width: 100%;
			  }
			  
			  .header-title-type {
				margin-right: 130rpx;
				font-size: 40rpx;
				color: $cus-bg-color;
				font-weight: 700;
				background: rgba(74,118,247,0.2);
				box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0,0,0,0.16);
				border-radius: 10rpx 0rpx 10rpx 0rpx;
				width: 160rpx;
				text-align: center;
				padding:8rpx 20rpx;
				line-height: 1;
			  }
		  
		}
		
		.btn-box {
			margin-top: 442rpx;
			
			.t-tips {
				display: block;
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				color: $cus-bg-color;
				margin-top: 40rpx;
			}
		}
		
		.footer-container {
		  // position: fixed;
		  // left: 0;
		  // right: 0;
		  // bottom: calc(constant(safe-area-inset-bottom) + 10vh);
		  // bottom: calc(env(safe-area-inset-bottom) + 10vh);
		  // padding:0 40px;
		  margin-top: 192rpx;
		  
		  .footer-content { 
			  width: 638rpx; 
			  margin:0 auto;
			  background: url(https://wm-sby.oss-cn-shanghai.aliyuncs.com/applet_assets/login-footer.png) center no-repeat;
			  background-size: 100% 100%;
			  position: relative;
			  
			   .footer-image { height:274rpx;width: 100%; }
			   .footer-content-main-o { position: absolute;top:90rpx;left:0;width: 100%;}
			   .footer-content-main { font-size:28rpx;color:rgba(81,90,110,0.8);text-align: center;margin:0 auto; font-weight: 500; }
			   .footer-content-main view:last-child { margin-top: 30rpx }
		  }
		  
		  .copyright {
			  text-align: center;
			  box-sizing: border-box;
			  font-size: 28rpx;
			  color: $cus-color-1;
			  margin-top: 60rpx;
		  }
		
		}
	}
}
</style>
